import ReactDOM   from 'react-dom';
import React      from 'react';
import { Filters, List } from './list';
import Bar   from  '../bar/bar.js';

let url = 'src/javascript/components/list/data.json';

//自定义Filter，渲染列表上方的筛选组件
//编写相应的自定义处理函数
//基础Filter类提供doSearch方法执行筛选动作
class MyFilter extends Filters{

  constructor(props){
      super(props);
      this.state={
        tips:["1111"]
      }
  }

  handleChange(event){
    let _r= Util.verifyOnlyNumber(event.target.value);
  }
  onShopNameChange(event){
    event.stopPropagation();
    //setState updatedom
    this.setState({
      tips:["123","456"]
    })
  }

  render(){
    return (

          <form>
              <div class="form-group">
                <label class="col-sm-2 control-label">店铺搜索:</label>
                <div class="col-sm-2">
                  <input type="text" ref="shopsearch" onChange={this.handleChange}/>
                </div>
                <div class='col-sm-2'>
                  <select ref="accountvalue">
                    <option value="0">账号未认证</option>
                    <option value="1">用户协议已认证，账号未认证</option>
                    <option value="2">用户协议已认证，实名认证已完成</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">店铺名称</label>
                <input type="text" ref="shopsearch" onChange={this.onShopNameChange.bind(this)}/>
                <div className={this.state.tips.length?'showTip':'hideTip'}>
                  {this.state.tips}
                </div>
              </div>
              <div class="form-group">
                <input type="button" onClick={this.doSearch.bind(this)} value="搜索" />
              </div>
            </form>
            );
  }
}

class CommentBox extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      filters: {},
    };
  }

  modifyHandler() {
    //todo
  }

  deleteHandler() {
    //todo
  }

  render(){
    //列表头参数定义，详见参数解释
    const headers = [
      {headerName: '序号', data: 'id', sortable: true, class: 'id-class'},
      {headerName: '名字', data: 'name', sortable: false, class: 'id-class'},
      {headerName: '性别', data: 'gender', sortable: false, class: 'id-class'},
      {headerName: '年龄', data: 'age', sortable: false, class: 'id-class'},
      {headerName: '操作', data: 'status', sortable: false, class: 'id-class'}
    ];

    return (
      <div>
        <List headers={headers} tableClass='m-base-table' url={url}>
          <MyFilter/>
        </List>
      </div>
    );
  }
}

ReactDOM.render(
    <CommentBox />,
    document.getElementById('app')
);
